<template>
    <div class="OrderShop">
        <!--navbar-->
        <div class="shop_navbar">
            <div class="shop_navbar_item" @click="type = 1">
                <span :class="{active:type == 1}">审核通过(<span style="font-size: 1.4rem;color: #00CC00;font-weight: 500">{{count}}</span>)</span>
            </div>
            <div class="shop_navbar_item" @click="type = 2">
                <span :class="{active:type == 2}">待审核(<span style="font-size: 1.4rem;color: #FE0000;font-weight: 500">{{count2}}</span>)</span>
            </div>
        </div>
        <!--数据循环内容审核通过内容-->
        <div class="shop_container_through" v-if="type==1">
            <!--循环体-->
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getOrderShop">
                <div class="shop_container_through_cycle" v-for="(item,index) in orderShop" :key="index"
                     @click="eventClickJumpDetails(item)">
                    <!--标题-->
                    <div class="stores_top_tit">
                        <span>{{item.zhicheng}}</span>
                        <p class="font-fix-one">
                            <span v-if="$store.state.options.user.oda.groupid == 3"
                                  @click.stop="eventClickEditOperate(index)">修改</span>
                            <span v-if="$store.state.options.user.oda.groupid == 3"
                                  @click.stop="eventClickTransferOperate(index)">转移</span>
                        </p>
                    </div>
                    <!--门店内容-->
                    <div class="stores_top_container">
                        <!--内容左侧-->
                        <div class="stores_top_container_left">
                            <span> <img src="../../../static/images/user-green.png" alt=""> {{item.realname}}</span>
                            <span> <img src="../../../static/images/phone-green.png" alt=""> {{item.phone}}</span>
                        </div>
                        <!--内容右侧-->
                        <div class="stores_top_container_right">
                            <img src="../../../static/images/location-green-dot.png" alt="">
                            <span>{{item.address}}</span>
                        </div>
                    </div>
                </div>
            </van-list>
        </div>
        <div class="shop_container_through" v-if="type==2">
            <!--循环体-->
            <van-list v-model="loading2" :finished="finished2" finished-text="没有更多了" @load="getOrderShop2">
                <div class="shop_container_through_cycle" v-for="(item,index) in orderShop2" :data-token="item.token"
                     @click="$router.push('/salesman/OrderAudit?token='+item.token+'&id='+item.id)" :key="index">
                    <!--标题-->
                    <div class="stores_top_tit">
                        <span>{{item.zhicheng}}</span>
                        <span style="font-size: 1.4rem;color: #FF0000;font-weight: 500">待审核</span>
                    </div>
                    <!--门店内容-->
                    <div class="stores_top_container">
                        <!--内容左侧-->
                        <div class="stores_top_container_left">
                            <span> <img src="../../../static/images/user-green.png" alt=""> {{item.realname}}</span>
                            <span> <img src="../../../static/images/phone-green.png" alt=""> {{item.phone}}</span>
                        </div>
                        <!--内容右侧-->
                        <div class="stores_top_container_right">
                            <img src="../../../static/images/location-green-dot.png" alt="">
                            <span>{{item.address}}</span>
                        </div>
                    </div>
                </div>
            </van-list>
        </div>
        <!--分配订单-->
        <van-popup v-model="salesman.show" round position="bottom" :style="{ height: '50%' }">
            <van-picker :columns="salesman.listName" @cancel="onCancel" @confirm="onConfirm" show-toolbar title="业务员"/>
        </van-popup>
    </div>
</template>

<script>
    import {List, Popup, Picker} from 'vant';

    export default {
        name: "OrderShop",
        components: {
            [List.name]: List, [Popup.name]: Popup, [Picker.name]: Picker
        },
        data() {
            return {
                type: 1, //点击切换
                page: 0,
                list_rows: 10,
                loading: false,
                finished: false,
                orderShop: [],
                count: 0,
                count2: 0,
                page2: 0,
                list_rows2: 10,
                loading2: false,
                finished2: false,
                orderShop2: [],
                salesman: {
                    show: false,
                    listName: [], listId: [],
                    selectId: '', index: ''
                }
            }
        },
        mounted() {
            this.count2 = this.$route.query.count;

            if (this.$store.state.options.user.oda.groupid == 3) {
                this.eventGetAllOrder();
            }
        },
        methods: {
            getOrderShop() {
                var that = this;
                var url = '/api/home/user/getlist';
                var param = {
                    page: this.page,
                    list_rows: this.list_rows,
                    status: 2,
                    groupid:1,
                    token: this.$store.state.options.user.token
                };
                this.$util.postRequestInterface(url, param, (res) => {
                    that.page = that.page + 1;
                    if (res.data == '') {
                        that.loading = false;
                        that.finished = true;
                    } else {
                        for (let i of res.data.data) {
                            that.orderShop.push({
                                id: i.id,
                                token: i.token,
                                zhicheng: i.zhicheng,
                                realname: i.realname,
                                address: i.address,
                                phone: i.phone,
                                oda: i
                            });
                        }
                    }
                    that.count = res.data.count;
                    // // 加载状态结束
                    that.loading = false;
                    // // 数据全部加载完成
                    if (that.orderShop.length >= res.data.count) {
                        that.finished = true;
                    }
                })
            },
            getOrderShop2() {
                var that = this;
                var url = '/api/home/user/getlist';
                var param = {
                    page: this.page2,
                    list_rows: this.list_rows2,
                    status: 1,
                    groupid:1,
                    token: this.$store.state.options.user.token
                };
                this.$util.postRequestInterface(url, param, (res) => {
                    that.page2 = that.page2 + 1;
                    if (res.data == '') {
                        that.loading2 = false;
                        that.finished2 = true;
                    } else {
                        for (let i of res.data.data) {
                            that.orderShop2.push({
                                id: i.id,
                                token: i.token,
                                zhicheng: i.zhicheng,
                                realname: i.realname,
                                address: i.address,
                                phone: i.phone
                            });
                        }
                    }
                    that.count2 = res.data.count;
                    // // 加载状态结束
                    that.loading2 = false;
                    // // 数据全部加载完成
                    if (that.orderShop2.length >= res.data.count) {
                        that.finished2 = true;
                    }
                });
            },
            eventClickJumpDetails(item) {
                this.$router.push({
                    path: '/salesman/order-stores',
                    query: {
                        id: item.id, token: item.token
                    }
                });
            },
            eventClickTransferOperate(index) {
                this.salesman.index = index;
                this.salesman.show = true;
            },
            //上面的取消按钮
            onCancel() {
                this.salesman.show = false;
            },
            //上面的确定按钮
            onConfirm(value, index) {
                this.salesman.selectId = this.salesman.listId[index];
                this.eventDistributionlerk();
                this.salesman.show = false;
            },
            //获取所有的业务员
            eventGetAllOrder() {
                var url = '/api/home/user/getall',
                    params = {
                        token: this.$store.state.options.user.token
                    };

                this.$util.postRequestInterface(url, params, (res) => {
                    this.salesman.listName = res.data.name;
                    this.salesman.listId = res.data.id;
                    // console.log(this.salesman);
                });
            },
            //分配给单独的业务员
            eventDistributionlerk() {
                var url = '/api/home/user/transferuser';
                var param = {
                    token: this.$store.state.options.user.token,
                    userid: this.orderShop[this.salesman.index].id,
                    touserid: this.salesman.selectId
                };
                this.$util.postRequestInterface(url, param, (res) => {
                    // console.log(res);
                    this.show = false;
                    setTimeout(() => {
                        this.$toast.success('操作成功');
                    }, 300);
                });
            },
            eventClickEditOperate(index) {
                this.$router.push({
                    name: 'TemporaryDirectorEditShopInfo',
                    params: this.orderShop[index]
                });
            }
        }
    }
</script>

<style scoped lang="scss">
    .OrderShop {
        /*navbar*/
        .shop_navbar {
            width: 100%;
            display: flex;
            margin-top: 1.7rem;

            /*里面的内容*/
            .shop_navbar_item {
                flex: 1;
                text-align: center;

                span {
                    padding-bottom: 0.5rem;
                }
            }

            .active {
                border-bottom: 0.1px solid #00cc00;
            }
        }

        /*数据循环审核通过循环体大包围*/
        .shop_container_through {
            /*循环体*/
            .shop_container_through_cycle {
                /*width: 100%;*/
                margin: 1rem auto;
                border-top: 0.5rem solid #eeeeee;
                padding-left: 1rem;
                padding-right: 1rem;
                /*顶部标题*/
                .stores_top_tit {
                    margin-top: 1.7rem;
                    display: flex;
                    justify-content: space-between;

                    span {
                        font-size: 1.7rem;
                        color: #333333;
                        font-weight: 500;
                    }
                }

                /*顶部下部内容*/
                .stores_top_container {
                    display: flex;
                    margin-top: 1.4rem;
                    /*内容左侧*/
                    .stores_top_container_left {
                        width: 50%;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        border-right: 0.1rem solid #eeeeee;

                        span {
                            font-size: 1.3rem;
                            color: #666666;

                            img {
                                width: 1.1rem;
                                height: 1.2rem;
                            }
                        }

                        span:last-child {
                            margin-top: 0.8rem;
                        }
                    }

                    /*内容右侧*/
                    .stores_top_container_right {
                        width: 50%;
                        display: flex;
                        align-items: center;

                        img {
                            width: 1.8rem;
                            height: 1.8rem;
                            margin: 0 1.2rem;
                        }

                        span {
                            font-size: 1.3rem;
                            color: #666666;
                            text-wrap: initial;
                        }
                    }
                }
            }
        }
    }

    .font-fix-one {
        font-size: 80%;

        span {
            font-size: 14px !important;
        }
    }
</style>
